<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - 超市系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="styles/product-comment.css">
    <link rel="icon" href="/photo/Profile picture/log.ico" type="image/x-icon">
</head>

<body>
    <main class="product-container" id="app">
        <!-- 商品主区域 -->
        <div class="product-main">
            <!-- 商品图片展示 -->
            <div class="product-gallery">
                <div class="main-image">
                    <img :src="product.image" :alt="product.name">
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="product-details">
                <h1 class="product-title">{{ product.commodityName }}</h1>
                <div class="product-meta">
                    <div class="price-section">
                        <span class="price-label">价格：</span>
                        <span class="price-value">¥{{ product.commoditySalePrice }}</span>
                    </div>
                </div>
                <!-- 商品描述 -->
                <div class="product-description">
                    <h3 class="section-title">商品描述</h3>
                    <p>{{ product.commodityDesc }}</p>
                </div>
                <!-- 商品规格 -->
                <div class="product-specs">
                    <h3>商品规格</h3>
                    <div class="specs-container">
                        <div class="spec-group" v-for="spec in productSpecs" :key="spec.specId">
                            <div class="spec-name">{{ spec.specName }}</div>
                            <div class="spec-option" v-for="attr in spec.attributes" :key="attr.attributeId"
                                :class="{ 'active': selectedSpecs[spec.specId] == attr.attributeId }"
                                @click="selectSpec(spec.specId, attr.attributeId)">
                                {{ attr.attributeValue }}
                            </div>
                        </div>
                    </div>
                    <div class="selected-specs-summary" v-if="Object.keys(selectedSpecs).length > 0">
                        <span>已选择：</span>
                        <span v-for="(attrId, specId) in selectedSpecs" :key="specId">
                            {{ getSpecName(specId) }}: {{ getAttributeValue(attrId) }}
                        </span>
                    </div>
                </div>
                <!-- 购买数量 -->
                <div class="quantity-selector">
                    <h3 class="section-title">购买数量</h3>
                    <div class="quantity-control">
                        <button @click="decreaseQuantity">-</button>
                        <input type="number" v-model.number="quantity" min="1">
                        <button @click="increaseQuantity">+</button>
                    </div>
                </div>

                <div class="action-buttons">
                    <button class="btn-buy" @click="buyNow">直接购买</button>
                    <button class="btn-cart" @click="addToCart">加入购物车</button>
                </div>
            </div>
        </div>

        <!-- 商品评价区域 -->
        <section class="product-reviews">
            <div class="reviews-header">
                <div class="reviews-stats">
                    <div class="rating-summary">
                        <div class="rating-score">{{ averageRating.toFixed(1) }}</div>
                        <div class="stars-large">
                            <i v-for="i in 5" :key="i"
                                :class="i <= Math.round(averageRating) ? 'fas fa-star' : 'far fa-star'"></i>
                        </div>
                        <div class="rating-count">{{ comments.length }} 条评价</div>
                    </div>
                </div>

                <div class="filter-controls">
                    <button class="filter-btn" :class="{active: filterType === 'all'}" @click="filterType = 'all'">
                        <i class="fas fa-list"></i>全部
                    </button>
                    <button class="filter-btn" :class="{active: filterType === 'good'}" @click="filterType = 'good'">
                        <i class="fas fa-smile"></i>好评 ({{ goodReviewsCount }})
                    </button>
                    <button class="filter-btn" :class="{active: filterType === 'medium'}"
                        @click="filterType = 'medium'">
                        <i class="fas fa-meh"></i>中评 ({{ mediumReviewsCount }})
                    </button>
                    <button class="filter-btn" :class="{active: filterType === 'bad'}" @click="filterType = 'bad'">
                        <i class="fas fa-frown"></i>差评 ({{ badReviewsCount }})
                    </button>
                    <button class="filter-btn" :class="{active: filterType === 'withImage'}"
                        @click="filterType = 'withImage'">
                        <i class="fas fa-image"></i>带图 ({{ withImageReviewsCount }})
                    </button>
                </div>
            </div>

            <div class="reviews-list">
                <div class="review-item" v-for="comment in filteredComments" :key="comment.id">
                    <div class="review-header">
                        <div class="user-avatar">
                            <div v-if="comment.isAnonymous!=0" class="initials">{{ getInitials(comment.user.userName )
                                }}</div>
                            <img v-else :src="comment.user.avatar" :alt="comment.user">
                        </div>
                        <div class="review-user-info">
                            <div class="review-user">{{ comment.user.userName }}</div>
                            <div class="review-date">{{ comment.commentTime }}</div>
                        </div>
                    </div>
                    <div class="review-rating">
                        <i v-for="i in 5" :key="i" :class="i <= comment.grade ? 'fas fa-star' : 'far fa-star'"></i>
                    </div>
                    <div class="review-content">{{ comment.content }}</div>
                    <div class="review-images" v-if="comment.images && comment.images.length > 0">
                        <div class="review-image" v-for="(img, index) in comment.images" :key="index">
                            <img :src="img" :alt="'评论图片' + (index+1)">
                        </div>
                    </div>
                </div>
                <div v-if="filteredComments.length === 0" class="no-reviews">暂无符合条件的评论</div>
            </div>
        </section>

        <!-- 购物车成功提示弹窗 -->
        <div class="modal" v-if="showSuccessModal">
            <div class="modal-content success-modal">
                <div class="modal-body">
                    <div class="success-icon">✓</div>
                    <div class="success-message">成功加入购物车</div>
                    <button class="btn-modal" @click="goToCart">去购物车</button>
                </div>
            </div>
        </div>
    </main>

    <script src="js/product-comment.js"></script>
</body>

</html>